<!-- 表格列 -->
<template>
  <el-table-column :prop="prop" :label="label" :width="width" :fixed="fixed">
    <template #default="{ row }" v-if="render">
      <div @click="clickHandle(row)" :class="{ 'view-link': isOpenView }">
        <VNode :content="render(row)" />
      </div>
    </template>
    <template #default="{ row }" v-if="slot">
      <div @click="clickHandle(row)" :class="{ 'view-link': isOpenView }">
        <slot name="slot" :row="row"></slot>
      </div>
    </template>
    <template #default v-if="children?.length">
      <TableColumn
        v-for="(childItem, childIndex) in children"
        :key="childIndex"
        :prop="childItem.prop"
        :label="childItem.label"
        :width="childItem.width"
        :fixed="childItem.fixed"
        :render="childItem.render"
        :slot="childItem.slot"
        :children="childItem.children"
      ></TableColumn>
    </template>
  </el-table-column>
</template>
<script setup lang="ts">
import VNode from "@u/VNode";
import TableColumn from "@com/Table/src/TableColumn.vue";
import type { TableConfigItem } from "@com/Table/index";

const props = defineProps({
  prop: {
    type: String,
    require: true,
  },
  label: {
    type: String,
    require: true,
  },
  isOpenView: {
    //点击是否能打开详情弹窗
    type: Boolean,
    default: false,
  },
  width: {
    type: [String, Number],
  },
  fixed: {
    type: [String, Boolean],
    default: false,
  },
  render: {
    type: Function,
  },
  slot: {
    type: String,
  },
  children: {
    type: Array<TableConfigItem>,
  },
}) as any;
const emit = defineEmits(["clickHandle"]);

//点击方法
const clickHandle = <T>(row: T) => {
  emit("clickHandle", { ...props }, row);
};
</script>
